<script>
  import {Post} from '../lib/net.js';
  import User from '../model/user.js';
  import InputModal from '../components/inputModal.svelte';
  import {AgentAdd} from '../api.js';
  import md5 from 'md5';
  import {onMount} from 'svelte';
  import Btn from '../components/btn.svelte';

  let user = new User();
  let btnText = '确认'
  let btnHref = "/agent/add/success"
  let inputText = [
    {label: "代理人姓名", val: user.name},
    {label: "代理人身份证号码", val: user.card_id},
    {label: "代理人手机号", val: user.phone},
    {label: "密码", placeholder: "请输入密码", val: user.pwd},
    {label: "初始资金", val: user.vfunds},
    {label: "提成比例", val: user.commission},
    {label: "正面", val: user.card_a},
    {label: "反面", val: user.card_b},
    {label: "手持", val: user.portrait},
    {label: "类别", val: user.p_agent},
    {label: "确认", type: "btn", click: submit}
  ]
  onMount(() => {
    user.p_agent = ''
  });


  async function submit() {
    if(user.pwd == "") {
        alert("请填写密码")
        return 
    }
    if(user.pwd.length < 8) {
        alert("密码需要大于8位")
        return
    }
    if(user.card_id.length > 18) {
        alert("身份证号错误")
        return
    }
    if(user.vfunds < 0) {
        alert("初始资金不能小于0")
        return
    }
    user.pwd = md5(user.pwd);
    user.commission = Number(user.commission)
    let ret = await Post(AgentAdd, user)
    if(!ret) user.pwd = "";
  }


  function changepic1(event) {
    let reader1 = new FileReader();
    let file1 = event.target.files[0];
    reader1.readAsDataURL(file1);
    reader1.onload = function () {
      user.card_a = reader1.result
      // inputText[6].val = reader.result
      // console.log(user.card_a)
    }
  }

  function changepic2(event) {
    let reader2 = new FileReader();
    let file2 = event.target.files[0];
    reader2.readAsDataURL(file2);
    reader2.onload = function () {
      user.card_b = reader2.result
      // inputText[7].val = reader.result
      // console.log(user.card_b)
    }
  }

  function changepic3(event) {
    let reader3 = new FileReader();
    let file3 = event.target.files[0];
    reader3.readAsDataURL(file3);
    reader3.onload = function () {
      user.portrait = reader3.result
      // inputText[8].val = reader.result
      // console.log(user.portrait)
    }
  }
</script>
<div>
		<div style="display: flex;flex-direction: row;align-items: center;width: 99%;margin: 5px;height: 60px;background-color: white;margin-top: 5px"
				 class="borderRadius4">
        <span style="color: #20222A;margin: 20px">
            会员信息-添加代理
        </span>
		</div>
		<div class="container">
				<div class="containerLeft">
						<div class="field">
								<label class="label">姓名</label>
								<div class="control">
										<input placeholder="请输入内容..." class="input" type="text" bind:value={user.name}>
								</div>
						</div>
						<div class="field">
								<label class="label">身份证号</label>
								<div class="control">
										<input placeholder="请输入内容..." class="input" type="text" bind:value={user.card_id}>
								</div>
						</div>
						<div class="field">
								<label class="label">手机号</label>
								<div class="control">
										<input placeholder="请输入内容..." class="input" type="text" bind:value={user.phone}>
								</div>
						</div>
						<div class="field">
								<label class="label">返佣比例</label>
								<div class="control">
										<input placeholder="请输入内容..." class="input" type="text" bind:value={user.commission}>
								</div>
						</div>
						<div class="field">
								<label class="label">初始密码</label>
								<div class="control">
										<input placeholder="请输入内容..." class="input" type="password" bind:value={user.pwd}>
								</div>
						</div>
						<div class="field">
								<label class="label">初始资金</label>
								<div class="control">
										<input placeholder="请输入内容..." class="input" type="text" bind:value={user.vfunds}>
								</div>
						</div>

						<!--<button class="button is-link is-fullwidth"-->
						<!--style="margin-top: 50px"-->
						<!--on:click={submit}>确认-->
						<!--</button>-->
				</div>
				<div class="containerRight">
						<div class="picDis">
								<div class="picDisLeft">
										<div class="picDisLeftOne">
												<input
																type="file"
																on:change={changepic1}
																name="resume"/>
												<img src={user.card_a?user.card_a:'images/front.png'} alt="">
										</div>
										<div class="picDisLeftTwo">
												<input
																type="file"
																on:change={changepic2}
																name="resume"/>
												<img src={user.card_b?user.card_b:'images/back.png'} alt="">
										</div>
										<div class="font14">上传身份证正反面</div>
								</div>
								<div class="picDisRight">
										<input
														type="file"
														on:change={changepic3}
														name="resume"/>
										<img src={user.portrait?user.portrait:'images/all.png'} alt="">
										<div class="font14">上传手持身份证</div>
								</div>
						</div>
						<!--<div class="sureButton" on:click={submit}>-->
						<!--<Btn text={btnText} href={btnHref}/>-->
						<!--</div>-->
						<button class="sureButton is-link is-fullwidth"
										style="margin-top: 50px"
										on:click={submit}>确认
						</button>
				</div>
		</div>
</div>

<style lang="scss">
		.picDis {
				width: 100%;
				padding: 60px 20%;
				display: flex;
				flex-direction: row;
		}

		.container {
				width: 99%;
				height: 100vh;
				display: flex;
				flex-direction: row;
				align-items: flex-start;
		}

		.containerLeft {
				width: 50%;
				height: 100vh;
				border: 1px solid #ccc;
				margin: 5px;
				padding: 30px 10%;
				background: #fff;
		}

		.containerRight {
				width: 50%;
				height: 100vh;
				border: 1px solid #ccc;
				margin: 5px;
				background: #fff;
				display: flex;
				flex-direction: column;
				align-items: center;
		}

		.picDisLeft {
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
		}

		.picDisLeftOne {
				width: 100%;
				/*height: 140px;*/
				border: 1px dashed #eeeeee;

				img {
						width: 100%;
				}
		}

		.picDisLeftTwo {
				width: 100%;
				/*height: 140px;*/
				border: 1px dashed #eeeeee;

				img {
						width: 100%;
				}
		}

		.picDisRight {
				width: 100%;
				margin-left: 10px;
				/*height: 300px;*/
				img {
						width: 100%;
				}
		}

		.font14 {
				font-size: 14px;
		}

		.sureButton {
				width: 60%;
				background: rgba(49, 138, 253, 1);
				border-radius: 8px;
				text-align: center;
				padding: 10px 0;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #ffffff;
		}

		.file-input {
				width: 240px;
				height: 100%;
				/*display: none;*/
		}
</style>
